<template>
  <div class="base-progress">
    <div class="inner" :style="{ width: myWidth + '%' }">
      <span>{{ myWidth }}%</span>
    </div>
  </div>
</template>

<script>
export default {
  // 1.基础写法(类型校验)
  // props: {
  //   myWidth: Number,
  // },
  // 完整写法(类型，非空，默认，自定义数值)
  props: {
    myWidth: {
      type: Number,
      // required: true, //必填
      default: 0, //默认值
      validator(value) {
        return value >= 0 && value <= 100;
      },
    },
  },
};
</script>

<style>
* {
  margin: 5px;
  padding: 0;
}
.base-progress {
  width: 200px;
  height: 20px;
  background-color: black;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: left;
}
.inner {
  width: 50%;
  height: 15px;
  background-color: aqua;
  border-radius: 10px;
  margin: 0 3px;
  text-align: right;
  transition: all 0.2s linear;
}
.inner span {
  position: absolute;
  margin-top: 15px;
  margin-left: -15px;
}
</style>
